<template>
	<view class="nav-filter">
		<u-tabs :list="navList"
			:activeStyle="{ color: activeColor, 'font-weight': 700, 'font-size': '32rpx' }"
			:inactiveStyle="{ color: inactiveColor, 'font-size': '30rpx' }"
			:current="navIndex" lineWidth="0" itemStyle="height:88rpx" @change="tabsClick">
			<view class="fboxRow Ycenter nav-action" slot="right" v-if="isMore || isFilter">
				<view class="more-btn" @tap="moreNavTap" v-if="isMore && isNav">
					<text class="bwfont bw-caidan font26"></text>
				</view>
				<view v-if="isFilter" class="filter-btn fboxRow Ycenter font24" @click="goPage">
					<text class="mr12">筛选</text><text class="bwfont bw-sanjiao font18"></text>
				</view>
			</view>
		</u-tabs>
		<view class="moreNav" v-if="isMoreNav">
			<u-scroll-list :indicator="true" indicatorColor="#6B707C" indicatorActiveColor="#E8CDA7">
				<view style="display: flex;">
					<view class="more-box Ystart Xstart" v-for="(item, index) in navArrange" :key="index">
						<view class="nav-tag fboxRow Ycenter Xcenter font-ell1 font26 color-ACB4C7 bg-21242C" v-for="(sub, i) in item" @click="moreItem(sub)" :key="i">
							{{sub.name}}
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<u-overlay :show="isMoreNav" @click="isMoreNav = false" :opacity="0"></u-overlay>
	</view>
</template>

<script>
	import {toolbar,resumeInfo} from '@/api/recruit.js'
	export default {
		props:{
			isFilter:{
				type: Boolean,
				default: false
			},
			isMore:{
				type: Boolean,
				default: false
			},
			isRecommend:{
				type: Boolean,
				default: true
			},
			companyId:{
				type: String,
				default: getApp().globalData.companyId
			},
			reqData:{
				type: Object,
				default:()=>{
					return {}
				}
			},
			type: {
				type: String,
				default: 'user' // company 公司 user用户
			}
		},
		options: { styleIsolation: 'shared' },
		data() {
			return {
				navList: [],
				isMoreNav: false,
				navArrange: [],
				navIndex: 0,
				isNav: true,
				globalColor: getApp().globalData.globalColor,
				activeColor: '',
				inactiveColor: ''
			}
		},
		watch: {
			globalColor: {
				handler(newVal) {
					if (newVal) {
						this.activeColor = newVal['selectedFontColor'];
						this.inactiveColor = newVal['contentFontLightColor'];
					}
				},
				deep: true,
				immediate: true
			}
		},
		mounted(){
			this.getInit()
		},
		methods: {
			tabsClick(e){
				if(this.navIndex != e.index){
					this.navList[this.navIndex].disabled = false
					this.navIndex = e.index
					this.navList[e.index].disabled = true
					this.$emit('change',e)
				}
			},
			getInit(){
				this.navList = []
				if(this.isRecommend){
					this.navList.push({jobId: "全部", name: "全部", disabled: true})
				}
				if(this.type == 'company'){
					toolbar({companyId: this.companyId}).then(res=>{
						res.data.filter(((item, index)=>{
							item.name = item.jobName
							item.disabled = false
							this.navList.push(item)
						}))
						if(res.data.length){
							this.isNav = true
						}else{
							this.isNav = false
						}
						this.navList[0].disabled = true
						this.$emit('change', this.navList[0])
					})
				}else{
					const vitaTemp = getApp().globalData.vitaTemp
					console.log(vitaTemp)
					if(vitaTemp && vitaTemp.memberId){
						if(vitaTemp.expectPositionList&&vitaTemp.expectPositionList.length){
							vitaTemp.expectPositionList.filter(item=>{
								this.navList.push({name: item})
							})
						}
					}else{
						resumeInfo().then(res=>{
							if(res.data && res.data.expectPositionList.length){
								res.data.expectPositionList.filter(item=>{
									this.navList.push({name: item})
								})
							}else{
								this.$emit('userVita', 'guide')
							}
							// 简历信息是否可以开放(true:已完善可以开放；false：未完善不能开放)
							if(!res.data.resumeOpen){
								this.$emit('userVita', 'perfect')
							}
							getApp().globalData.vitaTemp = res.data
						})
					}
					this.navList[0].disabled = true
					this.$emit('change', this.navList[0])
				}
			},
			goPage(){
				const { bw_params } = getApp().getBWData(['bw_params'])
				if (bw_params && bw_params.access_token) {
					if(this.type == 'user'){
						this.$pageTo('/recruit/common/filter?type=job')
					}else{
						this.$pageTo('/recruit/common/filter?type=vita')
					}
				}else{
					this.$emit('login')
				}
			},
			moreItem(item){
				this.navList[this.navIndex].disabled = false
				this.navIndex = item.index
				this.isMoreNav = !this.isMoreNav
				this.navList[item.index].disabled = true
				this.$emit('change',item)
			},
			moreNavTap(){
				this.isMoreNav = !this.isMoreNav
				this.navArrange = []
				let subItem = []
				// this.navList.length/9
				this.navList.filter((item, index)=>{
					item.index = index
					if(index%9 == 0){
						if(index !=0){
							this.navArrange.push(subItem)
						}
						subItem = [item]
					}else{
						subItem.push(item)
					}
				})
				this.navArrange.push(subItem)
			},
		}
	}
</script>

<style lang="scss" scoped>
.nav-filter{position: relative;height: 88rpx;padding: 0 24rpx 0 0 ;width: 750rpx;}
//.nav-filter .u-tabs{width: 730rpx;}
.nav-filter .moreNav{position: absolute;left: 0; right: 0; top: 88rpx;z-index: 10080; padding: 24rpx 24rpx 0 40rpx; max-height: 328rpx;background: var(--controllerBgColor);}
.nav-filter .more-box{max-height: 328rpx;width: 684rpx;}
.nav-filter .moreNav /deep/.u-scroll-list__indicator{margin-top: 20rpx;}
.nav-filter /deep/.u-tabs__wrapper__nav__item{position: relative;color:var(--contentFontLightColor) !important}

// .nav-filter /deep/.u-tabs__wrapper__nav__item::after{content: '';position: absolute;bottom: 4rpx;left: 50%; margin-left: -30rpx;width: 60rpx;height: 6rpx;background-color: #e8cda7;border-radius: 6rpx;}
.nav-filter /deep/.u-tabs__wrapper__nav__item__text--disabled{color: var(--selectedFontColor) !important;}
.nav-filter /deep/.u-tabs__wrapper__nav__item__text--disabled::after{content: '';position: absolute;bottom: 4rpx;left: 50%; margin-left: -30rpx;width: 60rpx;height: 6rpx;background-color: var(--selectedFontColor);border-radius: 6rpx;}

[data-theme='night-theme'] {
	
}

[data-theme='lightBlue-theme'] {
// .nav-filter /deep/.u-tabs__wrapper__nav__item__text--disabled{color: var(--selectedFontColor) !important;}
// .nav-filter /deep/.u-tabs__wrapper__nav__item__text--disabled::after{background-color: var(--selectedFontColor);}
}

.nav-filter .nav-tag{margin: 16rpx 16rpx 0 0; float: left; width: 212rpx;height: 72rpx; line-height: 72rpx;text-align: center; border-radius: 8rpx;}
.nav-action{padding-left: 10rpx;color:var(--contentFontFourColor)}
.filter-btn{ height: 48rpx;border-radius: 4rpx;}
.more-btn+.filter-btn{ margin-left: 24rpx;}




</style>
